<!-- 
    起始血量为50
    每秒掉血2
    消除一个加5
-->

<style>
    *{margin: 0;padding: 0;}
    html,body{
        background-color: pink ;
        height: 100%;
    }
    .xt{
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100px;
        height: 20px;
        border: dotted 5px yellow;
    }

    /* .xt span{
        width: 20px;
        height: 20px;
        background-color: red;
        display: block;
    } */
</style>

<body>
    <div class="xt">
        <span style="width: 50px;
        height: 20px;
        background-color: red;
        display: block;"></span>
    </div>
</body>

<script>
    function random(min,max){
        return Math.floor(Math.random()*(max-min+1)+min)
    }


    //获取网页绑定点击事件
    document.onclick=function(evt){
        //获取事件对象
        var e = evt || window.event
        //获取操作的标签
        var target = e.target || e.srcElement
        if(target.nodeName === 'IMG'){
            //父.removeChild(target)
            document.body.removeChild(target)
            jx()
        }
    }
    
    //写定时器
    setInterval(function(){
        //造img
        var imgObj = document.createElement('img')
        imgObj.src = './xxl1.jpg'
        //样式周边：定位、宽度、高度
        var w = random(50,60)
        imgObj.width = w
        imgObj.height = w
        imgObj.style.position = 'absolute'

        var maxW = (window.innerWidth||document.documentElement.clientWidth) - w
        var maxH = (window.innerHeight||document.documentElement.clientHeight) - w
        var l = random(0, maxW)
        var t = random(0, maxH)
        imgObj.style.left = l + 'px'
        imgObj.style.top = t + 'px'

         // 4 定时器中 - 追加到页面
        document.body.appendChild(imgObj)
    },1000)

        var jx=function(){
            //标签对象.style.CSS属性名转换为JS后的名称  = CSS属性值
            var bObj = document.querySelector('.xt span')
            var blood = parseInt(bObj.style.width)
            bObj.style.width = blood+5+'px'
            if(blood>=100){
                alert('win')
            }
        }

    //定时掉血
    setInterval(function() {
        var xt = parseInt(document.querySelector('.xt span').style.width)
        document.querySelector('.xt span').style.width = xt -2 + 'px'
}, 1000)
</script>